<!DOCTYPE html>

<html>

<head>

    <!-- 页面meta -->

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>学生名单主页</title>

    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

    <!-- 引入样式 -->

    <link rel="stylesheet" href="../plugins/elementui/index.css">

    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">

    <link rel="stylesheet" href="../css/style.css">

</head>

<body class="hold-transition">

<div id="app">

    <div class="content-header">

        <!--        <h1>学生信息</h1>-->
        <!--        <div>名字:<input type="text" >科目:<input type="text" ><button>查询</button><a href="">添加学生</a></div>-->

    </div>



    <div class="app-container">

        <center>
            <el-button type="primary" plain @click="studentManage">学生管理</el-button>
            <el-button type="primary" plain @click="helperManage">助手管理</el-button>
            <el-button type="primary" plain @click="checkDormManage">点名管理</el-button>
            <el-button type="primary" plain @click="leaveManage">请假管理</el-button>
            <el-button type="primary" plain @click="noticeManage">通告管理</el-button>

        </center>




        <div class="box">


         <center>



             <div class="filter-container">
                 <el-input placeholder="名字" v-model="one" @keyup.enter.native="searchByClass()"  style="width: 200px;" class="filter-item"></el-input>
                 <el-button @click="searchByName()" class="dalfBut" >查询</el-button>

                 <el-input placeholder="专业" v-model="two" @keyup.enter.native="searchByName()" style="width: 200px;" class="filter-item"></el-input>
                 <el-button @click="searchByProfession()" class="dalfBut">查询</el-button>
                 <el-button type="primary" class="butT" @click="handleCreate()">添加学生</el-button>
                 <el-button type="primary" class="butT" @click="handleCreates()">以文件的形式添加学生</el-button>
                 <!--                <el-button type="info" @click="handleBorrowInfo()">查询我的借书情况</el-button>-->
                 <el-button type="success" @click="autoAssignment" plain>自动分配宿舍</el-button>
             </div>
         </center>


            <!--stripe highlight-current-row/-->
            <el-table size="small" current-row-key="id" :data="dataList" >


                <el-table-column prop="id" align="center" label="序号"></el-table-column>

                <el-table-column prop="sno" align="center" label="学号"></el-table-column>

                <el-table-column prop="sname" label="名字" align="center"></el-table-column>

                <el-table-column prop="sex" label="性别" align="center"></el-table-column>

                <el-table-column prop="phone" label="电话" align="center"></el-table-column>
                <el-table-column prop="profession" label="专业" align="center"></el-table-column>
                <el-table-column prop="dormitory" label="宿舍号" align="center"></el-table-column>

                <el-table-column label="操作" align="center" width="240px">

                    <template slot-scope="scope">

                        <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">修改</el-button>

                        <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>

                        <el-button type="info" size="mini" @click="handleHelper(scope.row)">设为助手</el-button>
                    </template>

                </el-table-column>

            </el-table>

            <center>
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pagination.currentPage"
                        :page-sizes="[6, 12, 18, 24]"
                        :page-size="pagination.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pagination.total">
                </el-pagination>
            </div>
            </center>

            <div class="add-form">

                <el-dialog title="添加学生" :visible.sync="dialogFormVisible">

                    <el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right" label-width="100px">

                        <el-row>

                            <el-col :span="12">

                                <el-form-item label="姓名" >

                                    <el-input v-model="formData.sname"/>

                                </el-form-item>

                            </el-col>

                            <el-col :span="12">

                                <el-form-item label="性别" >

                                    <el-input v-model="formData.sex"/>

                                </el-form-item>

                            </el-col>
                            <el-col :span="12">

                                <el-form-item label="电话" >

                                    <el-input v-model="formData.phone"/>

                                </el-form-item>

                            </el-col>
                            <el-col :span="12">

                                <el-form-item label="专业" >

                                    <el-input v-model="formData.profession"/>

                                </el-form-item>

                            </el-col>


                        </el-row>




                    </el-form>

                    <div slot="footer" class="dialog-footer">

                        <el-button @click="cancel()">取消</el-button>

                        <el-button type="primary" @click="handleAdd()">确定</el-button>

                    </div>

                </el-dialog>

            </div>


<!--            修改表单-->
            <div class="add-form">
                <el-dialog title="修改信息" :visible.sync="dialogFormVisible4Edit">
                    <el-form ref="dataAddForm" :model="studentsDto"  label-position="right" label-width="100px">
                        <el-row>
                            <el-col :span="12" >
                                <el-form-item label="姓名">
                            <el-input
                                    placeholder="姓名"
                                    v-model="studentsDto.sname"
                                    :disabled="true">
                            </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="性别">
                            <el-input
                                    placeholder="性别"
                                    v-model="studentsDto.sex"
                                    :disabled="true">
                            </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">

                                <el-form-item label="电话" >

                                    <el-input v-model="studentsDto.phone"/>

                                </el-form-item>

                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="专业" >
                                    <el-input v-model="studentsDto.profession"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="密码" >
                                    <el-input
                                            placeholder="请输入8-16位密码"
                                            v-model="studentsDto.password"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="cancel()">取消</el-button>
                        <el-button type="primary" @click="handleEdit()">确定</el-button>
                    </div>
                </el-dialog>
            </div>

<!--            以文件形式添加学生-->
            <div class="add-form">

                <el-dialog title="导入学生信息" :visible.sync="dialogFormVisibleBorrow">

                    <h3 style="color: gray">此操作会自动生成导入错误的学生信息以及原因的文件，并把该文件下载到本地</h3>
                    <el-form ref="dataAddForm"   label-position="right" label-width="100px">
                        <input type="file" @change="Upload"/>
                    </el-form>
                </el-dialog>

            </div>


        </div>

    </div>

</div>

</body>

<!-- 引入组件库 -->

<script src="../js/vue.js"></script>

<script src="../plugins/elementui/index.js"></script>

<script type="text/javascript" src="../js/jquery.min.js"></script>

<script src="../js/axios-0.18.0.js"></script>

<script>
    var vue = new Vue({
        el: '#app',
        data:{
            dataList: [],//当前页要展示的列表数据
            dialogFormVisible: false,//添加表单是否可见
            dialogFormVisible4Edit:false,//编辑表单是否可见
            dialogFormVisibleBorrow:false, //编辑借书表单是否可见
            pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize:6,//每页显示的记录数
                total:0,//总记录数
            },
            formData: {
                sname:undefined,
                sex:undefined,
                phone:undefined,
                profession:undefined
            },//表单数据
            rules: {//校验规则
                name: [{ required: true, message: '姓名为必填项', trigger: 'blur' }],
            },
          total:'',
            borrow:{
                borrowNums:'',
                id:''
            },
            one:"",
            two:"",
            three:[],
            studentsDto:{
                sname:undefined,
                sex:undefined,
                phone:undefined,
                profession:undefined,
                password:undefined
            },
            studentId:undefined,
            studentOrPasswordDto:{
                id:undefined,
                phone:undefined,
                profession:undefined,
                password:undefined
            }
        },

        //钩子函数，VUE对象初始化完成后自动执行
        mounted() {
            this.getAll();
        },

        methods: {
            //列表
            getAll() {
                axios.get("/student/page?page="+this.pagination.currentPage+"&size="+this.pagination.pageSize).then((res)=>{
                    console.log(this.one)
                    this.dataList=res.data.data.studentDormitoryDtos
                    this.pagination.currentPage = res.data.data.current;
                    this.pagination.total = res.data.data.total;
                    this.pagination.pagesize=res.data.data.size;
                })

            },
            handleCreate() {
                this.dialogFormVisible=true;
                this. resetForm();
            },
            handleHelper(row){
                console.log(row)
                axios.post("http://localhost:80/helper/addHelper",row).then(res=>{
                    //console.log(res)
                    if(res.data.key==300){
                        this.$message.error(res.data.msg);
                        return
                    }
                    this.$message.success(res.data.msg);
                })
            },
            //重置表单
            resetForm() {
                this.formData={};
            },
            handleUpdate(val){
                axios.get("http://localhost/student/select?id="+val.id).then((res)=>{
                    if ((res.data.errMsg)!=null){
                        this.$message.error(res.data.errMsg);
                        return;
                    }
                    this.studentsDto=res.data.data;
                    this.studentId=val.id;
                })
                this.dialogFormVisible4Edit=true;
                this. resetEditForm();
            },
            resetEditForm(){
                this.studentsDto={};
            },

            //添加
            handleAdd () {
               axios.post("/student/insert",this.formData).then((res)=>{
                   if ((res.data.errMsg)!=null){
                       this.$message.error(res.data.errMsg);
                       return;
                   }else {
                       this.dialogFormVisible=false;
                       this.$message.success("添加成功");
                   }
                   this.getAll();
               })

            },
            //修改
            handleEdit(){
                this.studentOrPasswordDto.id=this.studentId;
                this.studentOrPasswordDto.phone=this.studentsDto.phone;
                this.studentOrPasswordDto.profession=this.studentsDto.profession
                this.studentOrPasswordDto.password=this.studentsDto.password
                console.log(this.studentOrPasswordDto)
                axios.put("http://localhost/student",this.studentOrPasswordDto).then((res)=>{
                    if (res.data.errMsg!=null){
                        this.$message.error(res.data.errMsg);
                        return;
                    }
                    this.dialogFormVisible4Edit=false;
                    this.$message.success("修改成功");
                    this.getAll();
                })
            },
            //取消
            cancel(){
                this.dialogFormVisible=false;
                this.dialogFormVisible4Edit=false;
                this.dialogFormVisibleBorrow=false;
                this.borrow.borrowNums=''
                this.borrow.borrowNums=''
                this.$message.info("当前操作取消");
            },
            handleCurrentChange(val){
                this.pagination.currentPage=val;
                this.getAll();
            },
            handleSizeChange(val){
                this.pagination.pageSize=val;
               this.getAll();
            },
            searchByName(){

                axios.get("/student/page?page="+this.pagination.currentPage+"&size="+this.pagination.pageSize+"&name="+this.one).then((res)=>{
                    console.log(this.one)
                    this.dataList=res.data.data.studentDormitoryDtos
                    this.pagination.currentPage = res.data.data.current;
                    this.pagination.total = res.data.data.total;
                    this.pagination.pagesize=res.data.data.size;
                })
                this.one=''
            },
            searchByProfession(){

                axios.get("/student/page?page="+this.pagination.currentPage+"&size="+this.pagination.pageSize+"&profession="+this.two).then((res)=>{
                    console.log(this.one)
                    this.dataList=res.data.data.studentDormitoryDtos
                    this.pagination.currentPage = res.data.data.current;
                    this.pagination.total = res.data.data.total;
                    this.pagination.pagesize=res.data.data.size;
                })
                this.two=''
            },
            autoAssignment(){
                axios.post("http://localhost/dormitory/assignment").then((res)=>{
                    if (res.data.errMsg!=null){
                        this.$message.error(res.data.errMsg);
                        return;
                    }
                    this.$message.success("操作成功");
                    this.getAll()
                })
            },
            handleDelete(val){
                this.$confirm("此操作永久删除当前信息，是否继续？","提示",{type:"info"}).then(()=>{
                    axios.delete("http://localhost/student/deleteStudents?ids="+val.id).then((res)=>{
                        if (res.data.errMsg!=null){
                            this.$message.error(res.data.errMsg);
                            return;
                        }
                        this.$message.success("删除成功");
                        this.getAll()
                    })
                })

            },
            handleCreates(){
                this.dialogFormVisibleBorrow=true;
            },
            Upload(event) {
                const flie = event.target.files[0];
                const formData = new FormData();
                formData.append("file", flie);
                axios
                    .post("http://localhost/student/insertMany/", formData, {
                        "Content-type": "multipart/form-data",
                    })
                    .then(
                        (res) => {
                            // 上传成功后的处理
                            console.log(res)
                            window.location.href = 'http://localhost/student?errMsg='+res.data.data;
                            this.$message.success("新增成功");
                            this.dialogFormVisibleBorrow=false;
                        },
                        (err) => {
                            // 出现错误时的处理
                            this.$message.error("操作失败");
                        }
                    );
                this.getAll();
            },
            studentManage(){
                window.location.href="http://localhost:80/xu/pages/students.html"
            },
            helperManage(){
                window.location.href="http://localhost:80/wu/pages/helper.html"
            },
            checkDormManage(){
                window.location.href="http://localhost:80/wu/pages/checkDorm.html"
            },
            leaveManage(){
                window.location.href="http://localhost:80/wu/pages/leaves.html"
            },
            noticeManage(){
                window.location.href="http://localhost:80/xu/pages/board.html"
            }
        }
    })

</script>

</html>